<template>
    <div
        class="xue-color-wrapper"
    >
        <div
            class="color-box"
            :style="{
                background: background,
            }"
            @click="show = true"
        ></div>
        <el-dialog
            :visible="show"
            show-close
            @close="show=false"
        >
            <vue-gpickr
                v-model="gradient"
                @change="changeColor"
            >
            </vue-gpickr>
        </el-dialog>
    </div>
</template>

<script>
import { VueGpickr, LinearGradient } from 'vue-gpickr';
const gradient = new LinearGradient({
  angle: 0,
  stops: [
    ['#FFFFFFFF', 0],
  ]
});
export default {
    props: ['defaultValue'],
    components: {
        VueGpickr,
    },
    watch: {
        background(val) {
            this.$emit('change', val);
        }
    },
    computed: {
       background() {
           const { angle = 0, stops = [] } = this.gradient;
           const colorStops = stops.map(vo => `color-stop(${vo[1]}, ${vo[0]})`).join(',');
           let startX = 0;
           let startY = 100;
           let endX = 0;
           let endY = 0;
           let tanAngle = Math.tan(angle / 180 * Math.PI);
           if (angle % 180 <= 45) {
               startX = tanAngle * 100;
           } else if (angle % 180 > 45 && angle % 180 < 90) {
               startX = 100;
               startY = 1 / tanAngle * 100;
           } else if (angle % 180 === 90) {
               startX = 100;
               startY = 0;
           } else if (angle % 180 > 90 && angle % 180 <= 135) {
               tanAngle = Math.tan((angle - 90) / 180 * Math.PI);
               startX = 100;
               startY = 0;
               endY = tanAngle * 100;
           } else if (angle % 180 > 135 && angle % 180 < 180) {
               tanAngle = Math.tan((angle - 90) / 180 * Math.PI);
               startX = 100;
               startY = 0;
               endY = 100;
               endX = (1- 1 / tanAngle) * 100;
           } else if (angle === 180) {
               startX = 0;
               endX = 0;
               startY = 100;
               endY = 0;
           }
           if (angle <= 180 || angle === 360) {
               return `-webkit-gradient(linear, ${endX}% ${startY}%, ${startX}% ${endY}%, ${colorStops})`;
           } else {
               return `-webkit-gradient(linear, ${startX}% ${endY}%, ${endX}% ${startY}%, ${colorStops})`;
           }
           
       } 
    },
    mounted() {
        const { defaultValue = '' } = this;
        const colorStops = defaultValue.match(/color-stop\(([^\)]*)\)/g);
        if (colorStops) {
            const stops = colorStops.map((vo) => {
                const color = /color-stop\(([^\)]*)\)/g.exec(vo)[1].split(',');
                return [color[1].trim(), Number(color[0].trim())];
            });
            this.gradient.stops = stops;
        }
    },
    data() {
        return {
            gradient,
            show: false,
        };
    },
    methods: {
        changeColor(e) {
            console.log('color change')
            this.$emit('change', this.background);
        }
    }
}
</script>

<style lang="less" scoped>
.xue-color-wrapper {
    display: inline-block;
    height: 16px;
    width: 24px;
    border: solid 1px #DEDEDE;
}
.color-box {
    width: 100%;
    height: 100%;
}
</style>